<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>客户端B</title>
</head>

<body>

  <div>
    <video id="video" muted autoplay controls width="400px" height="300px"></video>
    <br />
    <canvas id="canvas" style="display: none;" width="200px" height="200px"></canvas>
    <button id='button' style="margin: 10px">点击截图</button>
    <br />
    <img src="" alt="" width="200px" height="150px">
  </div>
  <script src="/client/socket.io/socket.io.js"></script>
  <script>
    let videoDom = document.getElementById('video')
    let canvasDom = document.getElementById('canvas')
    let imgDom = document.getElementsByTagName('img')[0]
    let btnDom = document.getElementById('button')
    let ctx = canvasDom.getContext('2d')

    // 点击截图
    btnDom.addEventListener('click', () => {
      ctx.drawImage(videoDom, 0, 0, 200, 200)
      imgDom.src = canvasDom.toDataURL('image/webp')
    })
    // 下面这个是自动截图，最新图片
    // videoDom.addEventListener('play', () => {
    //   setInterval(() => {
    //     ctx.drawImage(videoDom, 0, 0, 200, 200)
    //     imgDom.src = canvasDom.toDataURL('image/webp')
    //   }, 20)
    // })
    // 视频接受失败请求再次发送
    console.log(videoDom.srcObject)


    // socket.io 连接
    const socket = io.connect('http://localhost:9898')
    socket.emit('joinRoom', '123')

    socket.on('create', (room) => {
      console.log('创建或加入房间' + room)
    })
    // 接电话
    socket.on('call', (msg) => {
      console.log(msg)
    })

    // webRtc通信
    let config = {
      iceServers: [
        {
          urls: 'stun:stun.l.google.com:19302'
        }
      ]
    }
    let pc
    socket.on('signal', (message) => {
      pc = new RTCPeerConnection(config)
      // 通过setRemoteDescription保存clientA传过来的offer对象
      pc.setRemoteDescription(new RTCSessionDescription(message))
      // createAnswer 创建一个应答SDP对象,通过服务器发送给ClineA
      pc.createAnswer().then(answer => {
        pc.setLocalDescription(answer)
        socket.emit('signal', answer, '123')
      }).catch(err => {
        console.log('创建应答SDP 失败')
        console.log(err)
      })
      // 接收到candidate信息后，通过onIceCandidate 接口发送给ClientA
      pc.addEventListener('icecandidate', event => {
        let icecandidate = event.candidate
        if (icecandidate) {
          socket.emit('ice', icecandidate, 123)
        }
      })

      // 音视频通道建立后接受clientA 传过来的视频流
      pc.addEventListener('addstream', (event) => {
        if (event) {
          videoDom.srcObject = event.stream
          console.log(videoDom.srcObject)
        } else {
          socket.emit('call', 'refresh', '123')
          console.log('视频接受失败')
        }
      })
    })

    socket.on('ice', (message) => {
      if (pc !== 'undefined') {
        try {
          pc.addIceCandidate(new RTCIceCandidate(message));
        } catch (err) {
          console.log(err)
        }
      }
    })
    // 如果视频为空打电话给ClientA 重新发一次
    if (!videoDom.srcObject) {
      socket.emit('call', 'refresh', '123')
    }
  </script>
</body>

</html>